<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="box"></view>
                <view class="box-two">
                    <view class="u-line-1 text">18栋三单元1楼</view>
                    <view class="u-line-1 text-two">南航规避元小区物业服务中西</view>
                </view>
            </view>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text-three">值班电话</view>
                <view class="u-line-1 text-four">123-456789</view>
                <view class="box-three"></view>
            </view>
            <view class="flex-row wraper-row-three">
                <view class="u-line-1 text-five">值班电话</view>
                <view class="u-line-1 text-six">123-456789</view>
                <view class="box-four"></view>
            </view>
        </view>
        <view class="flex-col wrapper-two">
            <view class="wraper-row-four"></view>
            <view class="wraper-row-five">
                <view class="u-line-1 text">18栋三单元1楼</view>
                <view class="u-line-1 text-two">南航规避元小区物业服务中西</view>
            </view>
            <view class="flex-row wraper-row-six">
                <view class="u-line-1 text-three">值班电话</view>
                <view class="u-line-1 text-four">123-456789</view>
                <view class="box-five"></view>
            </view>
            <view class="flex-row wraper-row-seven">
                <view class="u-line-1 text-five">值班电话</view>
                <view class="u-line-1 text-six">123-456789</view>
                <view class="box-six"></view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 44rpx 32rpx 0rpx 32rpx;

        .wrapper {
            width: 100%;
            margin-bottom: 38rpx;
            padding: 36rpx 0rpx 4rpx 26rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-row {
                width: 622rpx;
                justify-content: space-between;
                margin-bottom: 28rpx;

                .box {
                    width: 130rpx;
                    height: 128rpx;
                    border-radius: 18rpx;
                    background: rgba(212, 212, 212, 1);
                }

                .box-two {
                    width: 478rpx;
                    margin-top: 6rpx;
                    padding: 70rpx 0rpx 10rpx 0rpx;

                    .text {
                        width: 254rpx;
                        font-size: 24rpx;
                        font-weight: 600;
                        color: rgba(183, 183, 183, 1);
                    }

                    .text-two {
                        top: 12rpx;
                        left: 16rpx;
                        font-size: 32rpx;
                        position: absolute;
                        font-weight: 600;
                        color: rgba(140, 140, 140, 1);
                    }
                }
            }

            .wraper-row-two {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: -2rpx;
                padding: 28rpx 262rpx 25rpx 0rpx;
                border-top-width: 2rpx;
                border-top-style: solid;
                border-top-color: rgba(226, 226, 226, 1);
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-three {
                    width: 120rpx;
                    font-weight: 600;
                    color: rgba(171, 171, 171, 1);
                }

                .text-four {
                    width: 190rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(125, 125, 125, 1);
                }

                .box-three {
                    width: 48rpx;
                    height: 44rpx;
                    border-width: 2rpx;
                    border-style: solid;
                    border-color: rgba(204, 204, 204, 1);
                }
            }

            .wraper-row-three {
                width: 654rpx;
                justify-content: space-between;
                padding: 28rpx 264rpx 29rpx 0rpx;
                border-top-color: rgba(226, 226, 226, 1);
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-five {
                    width: 120rpx;
                    font-weight: 600;
                    color: rgba(171, 171, 171, 1);
                }

                .text-six {
                    width: 190rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(125, 125, 125, 1);
                }

                .box-four {
                    width: 48rpx;
                    height: 44rpx;
                    border-width: 2rpx;
                    border-style: solid;
                    border-color: rgba(204, 204, 204, 1);
                }
            }
        }

        .wrapper-two {
            width: 100%;
            padding: 36rpx 0rpx 4rpx 26rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-row-four {
                width: 130rpx;
                height: 128rpx;
                margin-bottom: -122rpx;
                border-radius: 18rpx;
                background: rgba(212, 212, 212, 1);
            }

            .wraper-row-five {
                width: 478rpx;
                margin: 0rpx 0rpx 32rpx 144rpx;
                padding: 70rpx 0rpx 10rpx 0rpx;

                .text {
                    width: 254rpx;
                    font-size: 24rpx;
                    font-weight: 600;
                    color: rgba(183, 183, 183, 1);
                }

                .text-two {
                    top: 12rpx;
                    left: 16rpx;
                    font-size: 32rpx;
                    position: absolute;
                    font-weight: 600;
                    color: rgba(140, 140, 140, 1);
                }
            }

            .wraper-row-six {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: -2rpx;
                padding: 28rpx 262rpx 25rpx 0rpx;
                border-top-width: 2rpx;
                border-top-style: solid;
                border-top-color: rgba(226, 226, 226, 1);
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-three {
                    width: 120rpx;
                    font-weight: 600;
                    color: rgba(171, 171, 171, 1);
                }

                .text-four {
                    width: 190rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(125, 125, 125, 1);
                }

                .box-five {
                    width: 48rpx;
                    height: 44rpx;
                    border-width: 2rpx;
                    border-style: solid;
                    border-color: rgba(204, 204, 204, 1);
                }
            }

            .wraper-row-seven {
                width: 654rpx;
                justify-content: space-between;
                padding: 28rpx 264rpx 29rpx 0rpx;
                border-top-color: rgba(226, 226, 226, 1);
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-five {
                    width: 120rpx;
                    font-weight: 600;
                    color: rgba(171, 171, 171, 1);
                }

                .text-six {
                    width: 190rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(125, 125, 125, 1);
                }

                .box-six {
                    width: 48rpx;
                    height: 44rpx;
                    border-width: 2rpx;
                    border-style: solid;
                    border-color: rgba(204, 204, 204, 1);
                }
            }
        }
    }
</style>